<template>
  <div class="cz-box">
    <el-form
      ref="ruleFormRef"
      :model="formValue"
      label-width="auto"
      class="ruleForm"
    >
      <el-form-item label="处置内容描述" prop="cznr">
        <el-input
          v-model="formValue.cznr"
          :rows="4"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="处置结果上传" prop="cznr">
        <div class="upload-col">
          <el-upload
            v-if="imglist.length < 3"
            class="upload-demo"
            drag
            style="
              width: 100px;
              height: 100px;
              overflow: hidden;
              border-radius: 4px;
              font-size: 30px;
            "
            :before-upload="beforeUpload"
            :http-request="customUpload"
            multiple
          >
            <el-icon color="#2263BF"><Plus /></el-icon>
          </el-upload>

          <div class="img-box" v-for="(item, index) in imglist" :key="index">
            <span class="icon-close" @click="deleteImg(index)"
              ><el-icon><Close /></el-icon
            ></span>
            <img class="img-up" :src="item" />
          </div>
        </div>
        <div class="el-upload__tip" style="margin-top: 10px; width: 100%">
          最多可上传3张图片，支持jpg、png等格式
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import axios from 'axios';
let formValue = ref({
  cznr: '', // 处置内容描述
});
let imglist = ref([]);
const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt500K = file.size / 1024 / 1024 < 0.5;
  if (!isJPG) {
    ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
  }
  if (!isLt500K) {
    ElMessage.error('上传图片大小不能超过 500KB!');
  }
  return isJPG && isLt500K;
};

// 上传
const customUpload = async (options) => {
  const { file, onSuccess, onError, onProgress } = options;
  const formData = new FormData();
  formData.append('file', file);
  try {
    let { data } = await axios.post(
      '/integrated-workbench/v1/enforcement/picupload',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }
    );
    imglist.value.push(data.data.picPath);
  } catch (error) {
    console.error(error);
  }
};

// 删除图片
const deleteImg = (index) => {
  imglist.value.splice(index, 1);
};

// 返回结果
const getValue = () => {
  return {
    handleRemark: formValue.value.cznr,
    handlePicURL: imglist.value.join(','),
  };
};

defineExpose({
  getValue,
});

onMounted(() => {
  formValue.value.cznr = '';
  imglist.value = [];
});
</script>

<style lang="scss">
.cz-box {
  width: 100%;
  height: 100%;
  .ruleForm {
    width: 100%;
    height: 100%;
  }
  .upload-col {
    display: flex;
    align-items: top;
    padding-bottom: 8px;
  }
  .img-up {
    width: 100px;
    height: 100px;
    margin-left: 10px;
  }
  .img-box {
    position: relative;
    .icon-close {
      display: none;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      font-size: 14px;
      position: absolute;
      right: -8px;
      top: -8px;
      cursor: pointer;
      z-index: 999;
      background: red;
      border-radius: 50%;
      color: #fff;
    }
    &:hover {
      .icon-close {
        display: block;
        z-index: 999;
      }
    }
  }
  .upload-demo {
    border: 0;
  }
  .el-upload-dragger {
    background: rgba(142, 191, 255, 0.72);
    border-radius: 3px;
    border: 0 !important;
    margin-top: -5px;
  }
}
</style>
